<template>
<div class="page-container">
    <div class="common-content">
        <!-- 列表搜索条件部分 label宽度要固定,优先展示输入框和下拉框 ;时间选择和地区选择放置在最后,因为后两个的尺寸表较大,换行后会导致整体对不齐 -->
        <div class="search-wrap">
            <el-form :inline="true" :model="searchFilters" :size="searchSize" ref="searchFilters" label-position="right" label-width="100px">
                <el-row class="search-input">
                    <el-form-item label="实体仓编码：">
                        <el-input v-model="searchFilters.storeCode" placeholder="请输入实体仓编码"></el-input>
                    </el-form-item>
                    <el-form-item label="产品编码：">
                        <el-input v-model="searchFilters.productCode" placeholder="请输入产品编码"></el-input>
                    </el-form-item>
                </el-row>
                <el-row class="search-button">
                    <el-form-item>
                        <el-button-group>
                            <el-button type="primary" size="small" @click="findPage()">查询</el-button>
                            <el-button type="primary" size="small" @click="resetForm()">重置</el-button>
                        </el-button-group>
                    </el-form-item>
                </el-row>
                <el-row class="t_r button">
                    <el-form-item>
                        <el-button-group>
                            <el-button type="primary" size="small" @click="addForm()">新增</el-button>
                            <el-button type="primary" size="small" @click="exportJosnToExcel()">导出</el-button>
                        </el-button-group>
                    </el-form-item>
                </el-row>
                <!-- 表格数据部分 -->
                <div class="table-wrap">
                    <jic-table :height="350" :operationWidth="300" :tableList="tableList" :tableHeaderList="tableHeaderList" :totalSize="totalSize" :showDetailOperation="true" :showEditOperation="true" :showBatchDelete="false" :showSelection="false" :showIndex="false" :showDeleteOperation="true" @findPage="findPage" @handleDetail="handleDetail" @handleEdit="handleEdit" @handleSizeChange="handleSizeChange" @handlePageChange="handlePageChange" @handleDelete="handleDelete" ref="jicTable"></jic-table>
                </div>
            </el-form>
        </div>
    </div>
</div>
</template>

<script>
//一.导包区
import jicTable from "@/components/jicComponentGallery/jicTable";
import {
    exportExcel
} from "@/utils/excel";

//二.数据输出区
export default {
    //===== 注册组件 =====
    components: {
        jicTable
    },

    //===== 数据初始化区=====
    data() {
        return {
            //===== 公共数据初始化 =====
            pageIndex: 0, //当前页数：首页；
            pageSize: 10, //每页记录数：10条记录；
            totalSize: 0, //总记录数：返回数据总条数
            pageRequest: {
                pageNum: 1,
                pageSize: 10
            }, // 请求数据的参数
            tableList: [], // 表格列表数据
            searchSize: "mini",

            //=====表格表头数据=====
            tableHeaderList: [{
                    prop: "deptId",
                    label: "部门编号",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "storeName",
                    label: "实体仓名称",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "storeCode",
                    label: "实体仓编码",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "productName",
                    label: "产品名称",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "productCode",
                    label: "产品编码",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "warnValue",
                    label: "产品预警值",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "createTime",
                    label: "创建时间",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "updateTime",
                    label: "更新时间",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "deleteFlag",
                    label: "是否可用",
                    minWidth: 100,
                    formatter: this.flagFormatter
                }
            ],

            //=====搜索表单对应的数据对象初始化=====
            searchFilters: {
                id: null,
                deptId: null,
                storeCode: null,
                productCode: null,
                warnValue: null,
                createTime: null,
                updateTime: null,
                creater: null,
                updater: null,
                deleteFlag: null
            }
        };
    },

    //===== 初始化页面调用方法(dom元素绑定后再执行初始化数据操作) =====
    mounted() {
        this.findPage();
    },
    activated() {
        this.findPage();
    },

    //=====Vue.js 方法区=====
    methods: {
        //1.查询按钮：查询列表数据
        findPage(pageNum) {
            // 传过滤器的参数
            let this_ = this;
            if (this_.searchFilters === undefined || this_.searchFilters === null) {
                this_.searchFilters = {};
            }

            this_.searchFilters.pageNum =
                pageNum === null || pageNum === undefined ?
                this.pageRequest.pageNum :
                pageNum;
            this_.searchFilters.pageSize = this.pageRequest.pageSize;
            this.utils.request.findMStoreStockWarningPage(
                this_.searchFilters,
                function (res) {
                    if (res.code === "0000") {
                        this_.tableList = res.data.rows;
                        this_.totalSize = Number(res.data.total);
                        if (res.data.rows.length == 0) {
                            this_.$message({
                                message: "该查询条件下暂无数据",
                                type: "warning"
                            });
                        }
                    } else {
                        this_.tableList = [];
                        this_.totalSize = 0;
                    }
                }
            );
        },

        // 2.重置按钮：无条件查询搜索框条件
        resetForm(formName) {
            this.searchFilters = {};
            this.findPage(null);
        },

        // 3.详情按钮对应的方法
        handleDetail(params) {
            this.$router.push({
                path: "/MStoreStockWarningDetail/",
                query: {
                    id: params.row.id,
                    disabled: true
                }
            });
        },

        // 4.编辑按钮对应的方法
        handleEdit(params) {
            this.$router.push({
                path: "/MStoreStockWarningDetail/",
                query: {
                    id: params.row.id,
                    disabled: false
                }
            });
        },

        // 5.跳转到新增记录页面；
        addForm(params) {
            params = null;
            this.$router.push({
                path: "/MStoreStockWarningDetail/",
                query: {
                    id: 0,
                    disabled: false
                }
            });
        },
        // 6.每页记录数发生变化
        handleSizeChange(params) {
            this.pageRequest.pageSize = params.size;
        },

        // 7.请求页数发生变化
        handlePageChange(params) {
            this.pageRequest.pageNum = params.number;
            this.findPage();
        },
        // 8.页面弹窗处理方法
        add() {
            this.dialogVisible = true;
        },
        flagFormatter(row, value) {
            if (row.deleteFlag == 0) {
                return "可用";
            } else {
                return "已删除";
            }
        },

        // 9.关闭弹窗
        handleClose() {
            this.dialogVisible = false;
        },

        // 10.删除按钮：删除选中的记录
        handleDelete(data) {
            this.utils.request.deleteMStoreStockWarning({
                id: data.row.id
            }, res => {
                if (res.data) {
                    this.$message({
                        message: "删除成功",
                        type: "success"
                    });
                    this.findPage();
                } else {
                    this.$message({
                        message: "删除失败",
                        type: "warning"
                    });
                }
            });
        },
        //导出当页数据
        exportJosnToExcel() {
            let params = [{
                    label: "实体仓编码",
                    prop: "storeCode"
                },
                {
                    label: "实体仓名称",
                    prop: "storeName"
                },
                {
                    label: "产品名称",
                    prop: "productName"
                },
                {
                    label: "产品编码",
                    prop: "productCode"
                },
                {
                    label: "产品预警值",
                    prop: "warnValue"
                },
                {
                    label: "仓库地址",
                    prop: "addressDetail"
                },
                {
                    label: "创建日期",
                    prop: "createTime"
                }
            ];
            exportExcel(this.tableList, params, "库存产品预警配置");
        }

        //==========Vue.js自定义方法区==========
    }
};
</script>

<style lang="scss" scoped>
/* ele组件样式重置 */
.common-content {
    padding: 10px;
    box-sizing: border-box;

    .search-wrap /deep/ {
        .el-form-item__label {
            height: 32px;
            line-height: 32px;
        }

        .el-input--mini .el-input__inner {
            height: 32px;
            line-height: 32px;
        }

    }

    /* 通用工具部分样式 */
    .tool-wrap {
        width: 100%;
        height: auto;
        position: relative;
        overflow: hidden;

        .left-area {
            float: left;
            width: 50%;
            text-align: left;

            button {
                margin-right: 15px;
                border-radius: 5px;
            }
        }

        .right-area {
            float: right;
            width: 50%;
            text-align: right;
        }
    }

    /* 表格部分样式 */
    .table-wrap {
        width: 100%;
        max-height: 600px;
        margin-top: 20px;
    }

    /* 弹窗样式 */
    .dialog-wrap /deep/ .el-dialog__footer {
        text-align: center !important;
    }
}

.search-button {
    .el-form-item {
        margin-bottom: 0px !important;
    }
}

.button {
    .el-form-item {
        margin-bottom: 0px;
    }
}
</style>
